<template>
  <div id="app">
    <nav-header></nav-header>
    <article class="article_wrap">
      <!-- 首页左侧 -->
      <div id="content_left">
        <router-view></router-view>
      </div>
      <!-- 首页右侧 -->
      <div id="content_right">
		    <top></top>
        <bottom></bottom>  
      </div>
    </article>
	<!-- 底部 -->
	<foot></foot>
  </div>
</template>
<script>
import NavHeader from "@/components/Header/Header";
import Foot from "@/components/Footer/index";
import Top from "@/components/Sidebar/top";
import Bottom from "@/components/Sidebar/bottom";
export default {
  name: "app",
  components: {
    NavHeader,
	  Foot,
    Top,
    Bottom
  }
};
</script>  

<style lang="stylus">
* {
  margin: 0;
  padding: 0;
}
body{
    font: 14px play,PingFangSC-Regular,Microsoft Yahei;
    line-height: 1.5;
    color: #666;
	// background:$main-color
	&::-webkit-scrollbar {/*滚动条整体样式*/
	    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
	    height: 4px;
	    scrollbar-arrow-color:red;
	                
	}
	&::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
	    border-radius: 5px;
	    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	    /* background: rgba(0,0,0,0.2); */
	    background:#06aaff;
	    scrollbar-arrow-color:red;
	}
	&::-webkit-scrollbar-track {/*滚动条里面轨道*/
	    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	    border-radius: 0;
	    background: rgba(0,0,0,0.1);
	}
}
#app{
  background: #e9eaed
  .article_wrap{
    width: 1200px
    margin: 20px auto 
    display: flex
    justify-content: space-between
    #content_left{
      width: 900px
      
    }
    #content_right{
      width: 280px
    }
  }
}
</style>